<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2025-02-27 09:57:16
-->
<template>
  <div class="login-viewbox" :style="{ 'background-image': 'url(' + loginBg + ')' }">
    <div class="login_inner" :style="{ 'background-image': 'url(' + loginCenter + ')' }">
      <div class="login_container">
        <img src="../assets/logo.png" style="width: 120px;">
        <div class="title-container">Miniature Education Video</div>
        <div style="width:300px;">
          <el-input class="input_style" size="large" v-model="useFrom.username" placeholder="请输入用户名" />
          <el-input class="input_style" size="large" v-model="useFrom.password" type="password" show-password
            placeholder="请输入密码" />
          <el-button style="width:100%" size="large" type="primary" @click="userLogin">登 录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import loginBg from '../assets/login-bg.png';
import loginCenter from '../assets/login-center.png';
import { useAuth } from '@/componentApi/useAuth.js'

const useFrom = reactive({
  username: '',
  password: ''
})
const { userLogin } = useAuth(useFrom)

</script>

<style scoped>
.login-viewbox {
  min-width: 1200px;
  height: 100vh;
  min-height: 682px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.login_inner {
  width: 800px;
  height: 400px;
  margin: auto;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.login_container {
  width: 100%;
  height: 400px;
  padding-left: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-container {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin: 24px 0;
}

.input_style {
  margin-bottom: 24px;
}
</style>
